@import './base.scss';

body{
    display: flex;
    flex-direction: column;
}
header{
    width: 100%;
    height: 48px;
    background-color: #f1f1f1;
    div{
        width: 960px;
        height: 100%;
        margin: 0 auto;
        img{
            width: 108px;
            height: 24px;
            margin: 12px  0;
        }
    }
}

main{
    width: 100%;
    height:770px;
    margin-top: 36px;
    div{
        width: 992px;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;

        // 注册方式
        .little{
            width: 240px;
            height: 104.8px;
            margin: 40px 0;
            line-height: 50.4px;
            position: absolute;
            div{
                width:240px ;
                height: 50.4px;
                font-size: 14px;
                color: #191919;
                padding: 0 16px;
                border-radius: 6px;
                text-indent: 2em;
                background-color: #f1f1f1;
                &:nth-last-child(1){
                    background-color: #fff;
                }
            }
        }

        // 注册区域
        .big{
            width: 100%;
            height: 100%;
            padding:48px 276px 65px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            div{
                width: 100%;
                height: 48px;
                border-radius: 8px;
                text-align: center;
                input{
                    width: 100%;
                    height:100%;
                    background-color: #f1f1f1;
                    border:none;
                    outline: none;
                    text-indent: 1em;
                    font-size: 14px;
                }
                &:nth-child(1){
                    height: 74.2px;
                    display: flex;
                    flex-direction: column;
                    div{
                        color: #191919;
                        font-size: 32px;
                        height: 41.6px;
                    }
                    span{
                        font-size: 14px;
                        height: 17.6px;
                        margin-top: 15px;
                        color: #191919;
                        a{
                            color:#007dff;
                        }  
                    }          
                }
                &:nth-child(2){
                    width: 100%;
                    height:48px;
                    background-color: #f1f1f1;
                    border:none;
                    outline: none;
                    text-indent: 1em;
                    font-size: 14px;
                    text-align: center;
                    line-height: 48px;
                    display: flex;
                    div{
                        &:nth-child(1){
                            width:82px ;
                        }
                        &:nth-child(2){
                            width:324px ;
                        }
                        &:nth-last-child(1){
                            width: 100px;
                            display: flex;
                            padding-right:16px;
                            cursor: pointer;
                        }
                    }
                }
                &:nth-child(3){
                    width: 100%;
                    height:48px;
                    background-color: #f1f1f1;
                    border:none;
                    outline: none;
                    text-indent: 1em;
                    font-size: 14px;
                    text-align: center;
                    line-height: 48px;
                    display: flex;
                    div{
                        &:nth-child(1){
                            width:160px;
                            height: 48px;
                            text-align: left;
                            cursor: pointer;
                            i{
                                width: 20px;
                                height: 20px;
                                line-height: 0px;
                                margin-left: 76px;
                                margin-top: -22px;
                            }
                        }
                        &:nth-child(2){
                            width:50px ;
                            opacity: .4;
                        }
                        &:nth-child(3){
                            width: 80px;
                        }
                    }
                }
                &:nth-child(4){
                    width: 100%;
                    height:48px;
                    background-color: #f1f1f1;
                    border:none;
                    outline: none;
                    text-indent: 1em;
                    font-size: 14px;
                    text-align: center;
                    line-height: 48px;
                    display: flex;
                    input{
                        flex:1;
                    }
                    div{
                        width: 120px;
                        padding: 0 16px;
                        color:#007dff;
                        opacity: .5;
                        cursor: pointer;
                    }
                }
                &:nth-child(7){
                    width: 100%;
                    height:48px;
                    background-color: #f1f1f1;
                    border:none;
                    outline: none;
                    text-indent: 1em;
                    font-size: 14px;
                    text-align: center;
                    line-height: 48px;
                    display: flex;
                    div{
                        &:nth-child(1){
                            width: 73px;
                            text-align: left;
                        }
                        &:nth-child(2){
                            width: 160px;
                        }
                        &:nth-last-child(1){
                            width: 257px;
                            span{
                                width: 90px;
                                cursor: pointer;
                                text-align: left;
                            }
                        }
                    }
                }
                &:nth-last-child(1){
                    width: 276px;
                    height:48px;
                    button{
                        width: 100%;
                        height: 100%;
                        padding: 13px 15px;
                        background-color: #007dff;
                        border:none;
                        font-size: 16px;
                        text-align: center;
                        color: #fff;
                        opacity: .4;
                        cursor: pointer;
                    }
                }
                

            }
            
        }

        // 验证
        .register1{
            position: absolute;
            top: 506px;
            right: 198px;
            font-size: 12px;
            color: #bbbbbb;
            // display: none;
        }
        .register2{
            position: absolute;
            top: 340px;
            right: 450px;
            font-size: 12px;
            color: red;
            display: none;
        }
        .register3{
            position: absolute;
            top: 340px;
            right: 450px;
            font-size: 12px;
            display: none;
            color: red;
        }
        .register4{
            position: absolute;
            top: 506px;
            right: 450px;
            font-size: 12px;
            display: none;
            color: red;
        }
        .register5{
            position: absolute;
            top: 590px;
            right: 450px;
            font-size: 12px;
            color: red;
            display: none;
        }

    }
}



footer{
    width: 100%;
    height: 100px;
    background-color: #f1f1f1;
    div{
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        ul{
            margin-top: 12px;
            display: flex;
            li{
                a{
                    font-size: 14px;
                    color: rgba(0,0,0,0.6);
                    &:hover{
                        color: rgba(0,0,0);
                    }
                }
                span{
                    padding:13px;
                    color: rgba(0,0,0,0.1);
                    font-size: 14px;
                }
            }
        }
        p{
            font-size: 14px;
            margin-bottom: 8px;
            color: rgba(0,0,0,0.3);
        }
    }
}